<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header,main,footer{
            width: 1000px;
            margin: 0 auto;
        }
        header{
            height: 150px;
            background-color: silver;
        }
        main{
            height: 500px;
            background-color: #bbffaa;
            margin: 10px auto;
        }
        nav,article,aside{
            height: 100%;
            float: left;
        }
        /*设置左侧导航*/
        nav{
            width: 200px;
            background-color: yellow;

        }
        /*设置中间内容*/
        article{
            width: 580px;
            background-color: orange;
            margin: 0 10px;

        }
        .article_top, .article_footer{
            width: 560px;
            height: 240px;
            margin: 5px auto;
        }
        .article_top{
            background-color: seagreen;
        }
        .article_one{
            width: 160px;
            height: 230px;
            background-color: #cccccc;
            margin: 5px 20px;
            float: left;
        }
        .article_two{
            width: 160px;
            height: 230px;
            background-color: #cccc9c;
            margin: 5px auto;
            float: left;
        }
        .article_three{
            width: 160px;
            height: 230px;
            background-color: #cccc2c;
            margin: 5px 20px;
            float: left;
        }
        .article_footer{
            background-color: cornflowerblue;
        }

        /*设置右侧内容*/
        aside{
            width: 200px;
            background-color: #24bdf9;
        }
        footer{
            height: 150px;
            background-color: tomato;
        }

    </style>
</head>
<body>
    <!--创建头部-->
    <header></header>

    <!--网页主体-->
    <main>
        <!--左侧导航-->
        <nav></nav>
        <!--中间的内容-->
        <article>
            <div class="article_top"></div>
            <div class="article_footer">
                <div class="article_one"></div>
                <div class="article_two"></div>
                <div class="article_three"></div>
            </div>

        </article>
        <!--右边边栏-->
        <aside></aside>
    </main>

    <!--网页底部-->
    <footer></footer>

</body>
</html>